<template>
    <div class="printer-manage">
        <el-col class="zw-table-btns">
            <el-button type="primary" @click="router.push('/shop/add')" v-auth="'printer_set:management'"
                >新增打印机</el-button
            >
        </el-col>
        <!-- 表格列表 -->
        <div class="shoptable">
            <el-table :data="state.tableData" stripe style="width: 100%">
                <el-table-column label="打印机备注名称" prop="printerName" min-width="140"></el-table-column>
                <el-table-column label="打印机编号" prop="printerSn" min-width="140"> </el-table-column>
                <el-table-column label="状态" width="240" prop="printerRealtimeStatus">
                    <template v-slot="scope">
                        <div class="printer-status">
                            <div
                                :class="[
                                    'printer-circle',
                                    scope.row.printerRealtimeStatus == 3
                                        ? 'printer-red'
                                        : scope.row.printerRealtimeStatus == 1
                                        ? 'printer-gray'
                                        : ''
                                ]"></div>
                            <span>{{ scope.row.printerRealtimeStatusName }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="240">
                    <template v-slot="scope">
                        <el-button
                            @click="router.push('/shop/edit?id=' + scope.row.id)"
                            size="small"
                            v-auth="'printer_set:management'">
                            编辑
                        </el-button>
                        <el-button size="small" @click="del(scope.row.id)" v-auth="'printer_set:management'">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="zw-pagination">
            <Pagination
                :pageSize="state.perPage"
                :currentPage="state.page"
                :total="state.total"
                @sizeChange="sizeChange"
                @pageChange="pageChange">
            </Pagination>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import ElemBox from '@/commons/element/message.js';
import { ElMessage } from 'element-plus';
import request from '@/request';
import Pagination from '@/components/Pagination.vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const state = reactive({
    tableData: [],
    perPage: 10,
    page: 1,
    total: 0
});
const pageChange = data => {
    state.page = data;
};
/**
 * 切换每页展示条数
 * @param {*} data
 */
const sizeChange = data => {
    state.perPage = data;
    state.page = 1;
};
const del = id => {
    ElemBox.ElMessageBoxPromise(`确定要删除该打印机吗？`).then(res => {
        request('printerDel', { id }).then(res => {
            ElMessage.success(`删除成功`);
            getList();
        });
    });
};
const getList = () => {
    request('printerList', { page: state.page, perPage: state.perPage }).then(res => {
        state.tableData = res.data.list || [];
    });
};
getList();
</script>
<style lang="scss" scoped>
.printer-manage {
    margin-top: 16px;
    padding: 0 24px 24px 24px;
    background-color: #fff;
    height: calc(100% - 166px);
    box-sizing: border-box;
    .printer-status {
        display: flex;
        align-items: center;
        .printer-circle {
            width: 8px;
            height: 8px;
            background: #32d1ad;
            border-radius: 4px;
            margin-right: 8px;
        }
        .printer-red {
            background: #ff4a1a !important;
        }
        .printer-gray {
            background: #cccccc !important;
        }
    }
}
</style>
